<template>
  <div class="noc-management">
    <!-- 搜索表单 -->
    <el-form :inline="true" :model="searchForm" class="search-form">
      <el-form-item label="国家奥委会代码">
        <el-input v-model="searchForm.noc" placeholder="请输入国家奥委会代码"></el-input>
      </el-form-item>
      <el-form-item label="国家">
        <el-input v-model="searchForm.region" placeholder="请输入国家名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作按钮 -->
    <div class="operation-container">
      <el-button type="primary" @click="handleAdd">新增</el-button>
    </div>

    <!-- 数据表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="noc" label="国家奥委会代码"></el-table-column>
      <el-table-column prop="region" label="国家"></el-table-column>
      <el-table-column prop="notes" label="注释"></el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes, prev, pager, next, jumper"
      />
    </div>

    <!-- 新增/编辑对话框 -->
    <el-dialog
      :title="dialogType === 'add' ? '新增国家奥委会代码' : '编辑国家奥委会代码'"
      v-model="dialogVisible"
      width="50%"
    >
      <el-form :model="formData" label-width="120px">
        <el-form-item label="国家奥委会代码">
          <el-input v-model="formData.noc" placeholder="请输入国家奥委会代码"></el-input>
        </el-form-item>
        <el-form-item label="国家">
          <el-input v-model="formData.region" placeholder="请输入国家名称"></el-input>
        </el-form-item>
        <el-form-item label="注释">
          <el-input v-model="formData.notes" type="textarea" placeholder="请输入注释"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确认</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 删除确认框 -->
    <el-dialog
      v-model="deleteDialogVisible"
      title="确认删除"
      width="30%"
    >
      <span>确定要删除这条记录吗？</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="deleteDialogVisible = false">取消</el-button>
          <el-button type="danger" @click="confirmDelete">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

// 搜索表单数据
const searchForm = ref({
  noc: '',
  region: ''
})

// 表格数据
const tableData = ref([])

// 分页相关数据
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 对话框相关数据
const dialogVisible = ref(false)
const deleteDialogVisible = ref(false)
const dialogType = ref('add') // 'add' 或 'edit'
const currentId = ref(null)

// 表单数据
const formData = ref({
  noc: '',
  region: '',
  notes: ''
})

// 重置表单数据
const resetFormData = () => {
  formData.value = {
    noc: '',
    region: '',
    notes: ''
  }
}

// 获取数据的方法
const fetchData = async (params = {}) => {
  try {
    const response = await axios.get('http://127.0.0.1:5000/noc_page', {
      params: {
        ...params,
        page: currentPage.value,
        page_size: pageSize.value
      }
    })
    if (response.data.success) {
      tableData.value = response.data.data
      total.value = response.data.total
    } else {
      ElMessage.error(response.data.msg)
    }
  } catch (error) {
    console.error('获取数据失败：', error)
    ElMessage.error('获取数据失败')
  }
}

// 处理搜索
const handleSearch = () => {
  currentPage.value = 1 // 搜索时重置页码
  fetchData(searchForm.value)
}

// 重置表单
const resetForm = () => {
  searchForm.value = {
    noc: '',
    region: ''
  }
  currentPage.value = 1
  fetchData()
}

// 处理新增按钮点击
const handleAdd = () => {
  dialogType.value = 'add'
  resetFormData()
  dialogVisible.value = true
}

// 处理编辑按钮点击
const handleEdit = (row) => {
  dialogType.value = 'edit'
  currentId.value = row.id
  formData.value = { ...row }
  dialogVisible.value = true
}

// 处理删除按钮点击
const handleDelete = (row) => {
  currentId.value = row.id
  deleteDialogVisible.value = true
}

// 确认删除
const confirmDelete = async () => {
  try {
    const response = await axios.delete('http://127.0.0.1:5000/delete_noc', {
      params: { id: currentId.value }
    })
    if (response.data.success) {
      ElMessage.success('删除成功')
      deleteDialogVisible.value = false
      fetchData(searchForm.value)
    } else {
      ElMessage.error(response.data.msg)
    }
  } catch (error) {
    console.error('删除失败：', error)
    ElMessage.error('删除失败')
  }
}

// 处理表单提交
const handleSubmit = async () => {
  try {
    let url = 'http://127.0.0.1:5000/add_noc'
    let method = 'post'
    let data = { ...formData.value }

    if (dialogType.value === 'edit') {
      url = 'http://127.0.0.1:5000/update_noc'
      data.id = currentId.value
    }

    const response = await axios[method](url, data)
    if (response.data.success) {
      ElMessage.success(dialogType.value === 'add' ? '添加成功' : '更新成功')
      dialogVisible.value = false
      fetchData(searchForm.value)
    } else {
      ElMessage.error(response.data.msg)
    }
  } catch (error) {
    console.error('操作失败：', error)
    ElMessage.error('操作失败')
  }
}

// 处理每页条数变化
const handleSizeChange = (val) => {
  pageSize.value = val
  fetchData(searchForm.value)
}

// 处理页码变化
const handleCurrentChange = (val) => {
  currentPage.value = val
  fetchData(searchForm.value)
}

// 组件挂载时获取数据
onMounted(() => {
  fetchData()
})
</script>

<style scoped>
.noc-management {
  padding: 20px;
}

.search-form {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.operation-container {
  margin: 20px 0;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>
